<template>
  <div class="container">
    <el-tabs v-model="params.type" class="tabs-white tab-card" type="card" @tab-click="handleClick">
      <el-tab-pane :label="$t('导出链接')" name="2" />
      <el-tab-pane :label="$t('导入链接')" name="1" />
    </el-tabs>
    <div class="content">
      <div class="table-btn">
        <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 16px" @click="goAdd">
          {{ $t('添加站点友情链接') }}
        </el-button>
        <!-- <el-button
        type="primary"
        icon="el-icon-document-copy"
        style="margin-bottom:15px"
        @click="goCopy"
      >复制其他站点友链</el-button> -->
        <el-button v-if="params.type == 1">
          {{ $t('导入总链接数') }}
          <b>
            {{ count }}
            <strong :class="change_num > 0 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              " />
          </b>
        </el-button>
        <el-button v-if="params.type == 2">
          {{ $t('导出总链接数') }}
          <b>
            {{ count }}
            <strong :class="change_num > 0 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              " />
          </b>
        </el-button>
        <el-button>
          <span>{{ month }}{{ $t('月份变化量') }}</span>
          <b>
            {{ change_num }}
            <strong :class="change_num > 0 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              " />
          </b>
        </el-button>
      </div>
      <!-- <el-button type="danger"  icon="el-icon-delete" @click="Batchdelete"> {{ $t('批量删除') }}</el-button> -->
      <!-- <div><span>数量：</span>{{ count }}</div>
      <div><span>月变化量：</span>{{ change }}</div> -->

      <BaseTable ref="baseTable" :request="request" :params.sync="params" :is-request="false" @success="getTableData">
        <el-table-column label="ID" prop="id" width="75" />
        <el-table-column :label="$t('链接类型')" prop="url_type" width="120px">
          <template slot-scope="scope">
            <span v-if="scope.row.url_type == 1">{{ $t('友情交换') }}</span>
            <span v-if="scope.row.url_type == 2">{{ $t('链接出售') }}</span>
            <span v-if="scope.row.url_type == 3">{{ $t('链接购买') }}</span>
            <span v-if="scope.row.url_type == 4">{{ $t('版权链接') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('网站类型')" prop="site_type" width="120px">
          <template slot-scope="scope">
            <span v-if="scope.row.site_type == 1">{{ $t('企业站') }}</span>
            <span v-if="scope.row.site_type == 2">{{ $t('新闻站') }}</span>
            <span v-if="scope.row.site_type == 3">{{ $t('博客站') }}</span>
            <span v-if="scope.row.site_type == 4">{{ $t('论坛站') }}</span>
            <span v-if="scope.row.site_type == 5">{{ $t('门户站') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('链接名称')" prop="name" show-overflow-tooltip />
        <el-table-column :label="$t('链接地址')" prop="url" show-overflow-tooltip />
        <el-table-column :label="$t('打开方式')" prop="target" width="120px">
          <template slot-scope="scope">
            <span v-if="scope.row.target == 1">{{ $t('本页面打开') }}</span>
            <span v-if="scope.row.target == 2">{{ $t('新页面打开') }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="params.type == '2'" :label="$t('排序')" prop="sort" width="80px" />
        <el-table-column :label="$t('百度权重')" prop="baidu_weight" width="110px" />
        <el-table-column :label="params.type == '2' ? $t('反链位置') : $t('链接位置')" prop="position" />
        <el-table-column :label="$t('检查记录')" prop="check_log" width="140px">
          <template slot-scope="scope">
            <span v-if="scope.row.check_log == 1">{{ $t('存在') }}</span>
            <span v-if="scope.row.check_log == 2">{{ $t('不存在') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('添加人')" prop="add_person" />
        <el-table-column :label="$t('操作')" width="150px" fixed="right" align="right">
          <template slot-scope="scope">
            <CheckBtn @click="check(scope.row)" />
            <EditBtn @click="goEdit(scope.row)" />
            <DelBtn @success="goDel(scope.row)" />
          </template>
        </el-table-column>
      </BaseTable>

      <BaseDialog :title="$t('复制站点友链')" :dialog-show.sync="dialogShow2" width="50%" class="keyword" footer
        @submit="submitCopy">
        <el-form ref="addForm2" :model="addForm2" :rules="rules2" label-position="top">
          <el-form-item :label="$t('选择站点')" prop="website_id">
            <el-select v-model="addForm2.website_id" disabled :placeholder="$t('请选择站点')">
              <el-option v-for="item in options" :key="item.id" :label="item.domain" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('复制站点')" prop="copy_site_id">
            <el-select v-model="addForm2.copy_site_id" :placeholder="$t('请选择要复制的站点')">
              <el-option v-for="item in options" :key="item.id" :label="item.domain" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-form>
      </BaseDialog>
    </div>
  </div>
</template>
<script>
import linkApi from '@/api/link.js'
import websiteApi from '@/api/website.js'
export default {
  data() {
    return {
      request: linkApi.linkList,
      params: {
        website_id: '',
        type: ''
      },
      month: '',
      dialogShow: false,
      options: [], // 站点下拉选项
      addForm: {
        id: '',
        name: '',
        website_id: '',
        url: '',
        sort: '',
        target: ''
      },
      rules: {
        website_id: [
          {
            required: 'true',
            message: this.$t('请选择站点'),
            trigger: 'change'
          }
        ],
        name: [
          {
            required: 'true',
            message: this.$t('请输入友情链接名称'),
            trigger: 'blur'
          }
        ],
        url: [
          {
            required: 'true',
            message: this.$t('请输入友情链接'),
            trigger: 'blur'
          }
        ],
        sort: [
          { required: 'true', message: this.$t('请输入排序'), trigger: 'blur' }
        ],
        target: [
          {
            required: 'true',
            message: this.$t('请选择打开方式'),
            trigger: 'change'
          }
        ]
      },
      dialogShow2: false,
      addForm2: {
        website_id: '',
        copy_site_id: ''
      },
      rules2: {
        copy_site_id: [
          {
            required: 'true',
            message: this.$t('请选择要复制的站点'),
            trigger: 'change'
          }
        ]
      },
      count: '',
      change_num: ''
    }
  },
  computed: {
    siteId() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId: {
      handler(val, value) {
        if (val) {
          this.params.website_id = val
          this.$nextTick(() => {
            this.getList()
          })
        }
      },
      immediate: true
    }
  },
  created() {
    if (this.$route.query.type) {
      this.params.type = this.$route.query.type
    } else {
      this.params.type = '2'
    }
    this.getMonth()
    this.getWebsiteList()
  },
  mounted() { },
  methods: {
    // 获取当前月份
    getMonth() {
      var today = new Date()
      this.month = today.getMonth() + 1
    },
    handleClick(val, event) {
      this.params.type = val.name
      this.getList('search')
    },
    // 获取站点列表
    getWebsiteList() {
      websiteApi.websiteList().then(res => {
        this.options = res.data
        this.options2 = res.data
        this.params.website_id = res.data[0].id
      })
    },
    // 复制其他站点友情链接
    goCopy() {
      this.addForm2.website_id = this.params.website_id
      this.addForm2.copy_site_id = ''
      this.dialogShow2 = true
    },
    submitCopy() {
      this.$refs.addForm2.validate(valid => {
        if (valid) {
          linkApi.linkCopy({ ...this.addForm2 }).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.dialogShow2 = false
              this.getList('search')
            }
          })
        }
      })
    },

    // 新增
    goAdd() {
      this.$router.push({
        name: 'addLink',
        query: { type: this.params.type, siteId: this.params.website_id }
      })
    },
    // 编辑
    goEdit(row) {
      this.$router.push({
        name: 'updateLink',
        query: {
          type: this.params.type,
          siteId: this.params.website_id,
          id: row.id
        }
      })
    },
    // 查看
    check(row) {
      this.$router.push({
        name: 'linkInfo',
        query: {
          id: row.id,
          siteId: this.params.website_id,
          type: this.params.type
        }
      })
    },
    // 删除
    goDel(row) {
      const val = {
        id: row.id,
        website_id: this.params.website_id,
        type: this.params.type
      }
      linkApi.linkDelete(val).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.getList('search')
        }
      })
    },
    getTableData(res) {
      this.count = res.count
      this.change_num = res.change
    },
    // 列表
    getList(type) {
      this.$refs.baseTable.getList(type)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep {
  .tab-card.el-tabs--card .el-tabs__content {
    padding: 0 16px;
  }
}

.table-btn {
  .el-button+.el-button {
    margin-left: 8px;
  }
}

.content {
  background-color: #fff;
  padding: 16px 16px 0;

  .el-icon-arrow-up {
    font-weight: bolder;
    color: var(--huocms-com-color-primary);
    margin-left: 5px;
  }

  .el-icon-arrow-down {
    font-weight: bolder;
    color: #1fc009;
    margin-left: 5px;
  }
}
</style>
